<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
	<title>jQuery async treeview</title>
	
	<link rel="stylesheet" href="../scripts/jquery/tree/jquery.treeview.css" />
	<link rel="stylesheet" href="../scripts/jquery/tree/screen.css" />
	
	<script src="../scripts/jquery/jquery.js" type="text/javascript"></script>
	<script src="../scripts/jquery/jquery.cookie.js" type="text/javascript"></script>
	
	<script src="../scripts/jquery/tree/jquery.treeview.js" type="text/javascript"></script>
	<script src="../scripts/jquery/tree/jquery.treeview.edit.js" type="text/javascript"></script>
	<script src="../scripts/jquery/tree/jquery.treeview.async.js" type="text/javascript"></script>


<!-- source.php -->
<!-- <?php -->
<!-- if ($_REQUEST['root'] == "source"): -->
<!-- ?> -->
<!-- [ -->
<!-- 	{ -->
<!-- 		"text": "1. Pre Lunch (120 min)", -->
<!-- 		"expanded": true, -->
<!-- 		"classes": "important", -->
<!-- 		"children": -->
<!-- 		[ -->
<!-- 			{ -->
<!-- 				"text": "1.1 The State of the Powerdome (30 min)" -->
<!-- 			}, -->
<!-- 		 	{ -->
<!-- 				"text": "1.2 The Future of jQuery (30 min)" -->
<!-- 			}, -->
<!-- 		 	{ -->
<!-- 				"text": "1.2 jQuery UI - A step to richnessy (60 min)" -->
<!-- 			} -->
<!-- 		] -->
<!-- 	}, -->
<!-- 	{ -->
<!-- 		"text": "2. Lunch  (60 min)" -->
<!-- 	}, -->
<!-- 	{ -->
<!-- 		"text": "3. After Lunch  (120+ min)", -->
<!-- 		"children": -->
<!-- 		[ -->
<!-- 			{ -->
<!-- 				"text": "3.1 jQuery Calendar Success Story (20 min)" -->
<!-- 			}, -->
<!-- 		 	{ -->
<!-- 				"text": "3.2 jQuery and Ruby Web Frameworks (20 min)" -->
<!-- 			}, -->
<!-- 		 	{ -->
<!-- 				"text": "3.3 Hey, I Can Do That! (20 min)" -->
<!-- 			}, -->
<!-- 		 	{ -->
<!-- 				"text": "3.4 Taconite and Form (20 min)" -->
<!-- 			}, -->
<!-- 		 	{ -->
<!-- 				"text": "3.5 Server-side JavaScript with jQuery and AOLserver (20 min)" -->
<!-- 			}, -->
<!-- 		 	{ -->
<!-- 				"text": "3.6 The Onion: How to add features without adding features (20 min)", -->
<!-- 				"id": "36", -->
<!-- 				"hasChildren": true -->
<!-- 			}, -->
<!-- 		 	{ -->
<!-- 				"text": "3.7 Visualizations with JavaScript and Canvas (20 min)" -->
<!-- 			}, -->
<!-- 		 	{ -->
<!-- 				"text": "3.8 ActiveDOM (20 min)" -->
<!-- 			}, -->
<!-- 		 	{ -->
<!-- 				"text": "3.8 Growing jQuery (20 min)" -->
<!-- 			} -->
<!-- 		] -->
<!-- 	} -->
<!-- ] -->
<!-- <?php  -->
<!-- else: sleep(1);  -->
<!-- ?> -->
<!-- [ -->
<!-- 	{ -->
<!-- 		"text": "1. Review of existing structures", -->
<!-- 		"expanded": true, -->
<!-- 		"children": -->
<!-- 		[ -->
<!-- 			{ -->
<!-- 				"text": "1.1 jQuery core" -->
<!-- 			}, -->
<!-- 		 	{ -->
<!-- 				"text": "1.2 metaplugins" -->
<!-- 			} -->
<!-- 		] -->
<!-- 	}, -->
<!-- 	{ -->
<!-- 		"text": "2. Wrapper plugins" -->
<!-- 	}, -->
<!-- 	{ -->
<!-- 		"text": "3. Summary" -->
<!-- 	}, -->
<!-- 	{ -->
<!-- 		"text": "4. Questions and answers" -->
<!-- 	} -->
<!-- ] -->

	<script type="text/javascript">
	function initTrees() {
		$("#black").treeview({
			url: "source.php"
		})
		
		$("#mixed").treeview({
			url: "source.php",
			// add some additional, dynamic data and request with POST
			ajax: {
				data: {
					"additional": function() {
						return "yeah: " + new Date;
					}
				},
				type: "post"
			}
		});
	}
	$(document).ready(function(){
		initTrees();
		$("#refresh").click(function() {
			$("#black").empty();
			$("#mixed").empty();
			initTrees();
		});
	});
	</script>
	
	</head>
	<body>
	
	<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/">jQuery Treeview Plugin</a> Demo</h1>
	<div id="main">
	
	<ul>
		<li><a href=".">Main Demo</a></li>
		<li><a href="source.phps">Server component used</a></li>
	</ul>
		
	<h4>Lazy-loading tree</h4>
	
	<ul id="black">
	</ul>
	
	<h4>Mixed pre and lazy-loading</h4>
	
	<ul id="mixed">
		<li><span>Item 1</span>
			<ul>
				<li><span>Item 1.0</span>
					<ul>
						<li><span>Item 1.0.0</span></li>
					</ul>
				</li>
				<li><span>Item 1.1</span></li>
			</ul>
		</li>
		<li id="36" class="hasChildren">
			<span>Item 2</span>
			<ul>
				<li><span class="placeholder">&nbsp;</span></li>
			</ul>
		</li>
		<li>
			<span>Item 3</span>
		</li>
	</ul>
	
	<button id="refresh">Refresh both Trees</button>
		
</div>
 
</body></html>